<template>
  <div class="page">
    <div class="edit-canvas">
      <div class="form">
        <normal-input ref="titleTextfield" :placeholder="'Title'"></normal-input>

      <vue-editor  v-model="content"></vue-editor>
      <div class="button-canvas">
        <my-button class="button" :title="'Save'" @click="onSaveButtonClick"></my-button>
        <my-button class="button" :title="'Cancel'" @click="onCancelButtonClick"></my-button>
      </div>
    </div>
    </div>
  </div>
</template>

<script>

    import zhRequest from '../../utils/geralt_common/network_function';
    import manageInterface from '../../interface/manageInterface';
    import manageConstant from '../../constant/manageConstant';
    import {VueEditor} from 'vue2-editor';
    import NormalInput from '../../components/input/normal_textfield.vue'
    let myButton = resolve => {
      require(['../../components/buttom'],resolve);
    }
    export default {
    	  mounted(){
          var item = this.$route.query.cellItem;
          console.log('getItem',this.$route.query.cellItem)
          this.status = 'create';
          if(item && item.item){
          	this.status = 'update';
          	if(item.item.title)
              this.$refs.titleTextfield.setText(item.item.title);
          	if(item.item.document)
              this.content = item.item.document;
          	if(item.item._id)
          		this._id = item.item._id
          }
        },
        name: "edit-page",
        components: {
        	VueEditor,
          NormalInput,
          myButton
        },
        data(){
        	return {
        		_id: '',
        		content: '',
            status: 'create',
          }
        },
        methods:{
          onSaveButtonClick(){
          	if(this.status=='create') {
              zhRequest.post(
                manageInterface.adminBlogDocumentUrl + '/',
                {
                  document: this.content,
                  title: this.$refs.titleTextfield.getText(),
                },
                (result) => {

                },
                (result) => {

                })
            }
            else {

              console.log('this._id',this._id);
              zhRequest.update(
                manageInterface.adminBlogDocumentUrl + '/',
                {
                	_id: this._id,
                  document: this.content,
                  title: this.$refs.titleTextfield.getText(),
                },
                (result) => {

                },
                (result) => {

                })
            }
          },
          onCancelButtonClick(){
            console.log('saveResetClicked');
            console.log('router',this.$router);
            console.log('route',this.$route);
            this.$router.back();
          },
        }
    }
</script>

<style scoped>
  .form{
    padding: 8px;
  }
  .page{
    height: 100%;
    width: 100%;
  }
  .edit-canvas{
    background-color: white;
  }
  .button-canvas{
    padding-top: 30px;
    width: 100%;
    display: flex;
    height: 100px;
  }
  .button{
    margin-left: auto;
    margin-right: auto;
  }
</style>
